<template>
<div class="index">
    <my_attention></my_attention>
    <div class="main">
      <div class="left bg_white">
          <div class="nav">
              <ul>
                  <li class="bule">推荐</li>
                  <li>最新</li>
                  <li>等待回答</li>
                  <li class="btn"><button @click="showQuestionFun">提问</button></li>
              </ul>
          </div>
          <div class="article_list" v-for="(item,index) in questions">
              <p>来自:{{item.questionLabel}}</p>
              <div class="clearfloat">
                    <div class="head_img fl">
                        <img v-bind:src="item.userId.headerImg|filterHeader" alt="" v-if="item.userId.headerImg">
                        <i class="iconfont" v-else>&#xe638;</i>
                    </div>
                    <div class="content fl">
                        <div class="one">
                            <router-link v-bind:to="'/personHome/'+item.userId._id" tag="a"  class="username bule">{{item.userId.username}}</router-link>
                            <span class="time">{{item.createdAt|filterDate}}</span>
                        </div>                    
                    </div>
              </div>
              <router-link v-bind:to="'/question/questionDetail/'+item._id" tag="a">
                      <h4 class="title">{{item.questionTitle}}</h4>
                        <!-- <div class="introduction" v-html="item.articleContent">
                            {{item.articleContent}}<span class="bule">【阅读全文】</span></p>
                        </div> -->
                  </router-link>
                  <div class="operation" v-if="islogin">
                        <span class="like">
                          <i class="iconfont pointer"  @click="giveLikeFun" v-bind:articleId="item._id" v-bind:index="index" v-bind:class="{bule:isLike[index]}">&#xe641;</i>
                          <span>{{item.giveLikes.length}}</span>
                          <span>个赞</span>
                        </span>
                        <span class=" collection">
                            <i  @click="giveCollectionFun" v-bind:articleId="item._id" v-bind:index="index" v-bind:class="{green:isCollection[index]}" class=" iconfont pointer" >&#xe667;</i>
                            <span>{{item.collections.length}}</span>
                            <span>个收藏</span>
                        </span>
                        <span class="comment">
                            <i class=" iconfont">&#xe628;</i>
                            <router-link v-bind:to="'/articleDetail/'+item._id+'#comment'" tag="a">
                                <span>{{item.commentContents.length}}</span>
                                <span>条回答</span>
                            </router-link>
                        </span>
                  </div>  
          </div>
      </div>
      <div class="right">
          <hot_user></hot_user>
          <my_label for=""></my_label>
      </div>
  </div>
  <!-- 提问弹框 -->
  <div class="task" v-if="isQuestionBox">
      <div class="question">
          <div class="close" @click="showQuestionFun">
              <i class="iconfont">&#xe634;</i>
          </div>
            <h3>提   问</h3>
            <input type="text" placeholder='请一句话说明你的问题' v-model="questionTitle" @click="onEditorFocus">
            <input type="text" placeholder="添加问题的标签" v-model="questionLabel" @click="onEditorFocus">
            <quill-editor ref="myTextEditor"
                    v-model="content"
                    :options="editorOption"
                    @blur="onEditorBlur($event)"
                    @focus="onEditorFocus($event)"                     
                    >
            </quill-editor>
            <div class="btn">
                <p v-if="err_message" class="err_message">{{err_message}}</p>
                <button @click="doQuestion">提   交</button>
            </div>
      </div>
  </div>
</div>
</template>
<script>
import axios from 'axios'
import myAttentionVue from './myAttention.vue';
import Label from './Label'
import HotUser from './HotUser'
import dateformat from '../../assets/js/dateformat.js'
import filterHeader from '../../assets/js/filterHeaderImg.js'
import giveLikeCollection from "../../assets/js/giveLikeCollection"
import hljs from 'highlight.js'
import 'highlight.js/styles/github.css'
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
    export default{
        data(){
            return{
                questions:[],
                isQuestionBox:false,
                isLike:[],
                isCollection:[],
                content:'',
                questionTitle:'',
                questionLabel:'',
                err_message:'',
                editorOption: {
                modules: {
                        toolbar: [
                        [,{ 'header': 1 },{ 'header': 2 }],
                        ['bold', 'italic', 'underline'],
                        ['code-block','blockquote' ],
                        [{ 'list': 'ordered' }, { 'list': 'bullet' }],
                        ['link', 'image', 'video']
                        ],
                        syntax: {
                        highlight: text => hljs.highlightAuto(text).value
                        }
                    }
                }
            }
        },
        created:function(){
            this.$store.dispatch('isloging');
            this.$store.commit('ISNAVHEAD',true)
            this. getquestions();
        },
        computed:{
            islogin:function(){
                return this.$store.state.isLoging
            },
            editor() {
                return this.$refs.myTextEditor.quillEditor
            },
            contentCode() {
                return hljs.highlightAuto(this.content).value
            },
        },
        components:{
            "my_attention":myAttentionVue,
            'my_label':Label,
            'hot_user':HotUser,
            'quill-editor':quillEditor
        },
        methods:{
            // 提交问题
            doQuestion:function(){
                var that = this;
               if(this.questionTitle===""){
                   this.err_message="请填写标题"
               }else if(this.questionLabel===""){
                   this.err_message="请填写标签"
               }else{
                   axios.post('/api/question/releaseQuestion',{
                       questionTitle:that.questionTitle,
                       questionLabel:that.questionLabel,
                       content:that.content,
                       userId:that.$store.state.userId
                   }).then(function(res){
                       if(res.data.state===1){
                           that.$router.push('/personal/comments')
                       }
                   })
               }
            },
            onEditorBlur(editor) {
     
            },
            onEditorFocus:function(){
                this.err_message=''
            },
            // 点击提问按钮
            showQuestionFun:function(){
                 if(this.islogin){
                    this.isQuestionBox = !this.isQuestionBox;
                }else{
                    this.$store.commit('LOGINBOX',true)
                }   
            },
            // 点击喜欢
            giveLikeFun:function(e){
                giveLikeCollection(e,'/api/question/giveLike','/api/question/delLike',this.isLike,this,this.getquestions)
            },
            // 点击收藏
             giveCollectionFun:function(e){
                 giveLikeCollection(e,'/api/question/giveCollection','/api/question/delCollection',this.isCollection,this,this.getquestions)
            },
            // 过滤函数喜欢或收藏的列表中是否存在用户名，来确定用户是否已经点过收藏和喜欢
            filterName:function(value){
                return value.userName===this.$store.state.userName
            },
            // 获取问答
            getquestions:function(){

                var that = this;
                axios.get('api/question/getquestions').then(function(res){
                    that.questions = res.data;
                    for(var i=0; i<that.questions.length; i++){
                        that.$set(that.isLike,i,that.questions[i].giveLikes.filter(that.filterName)[0]?true:false);
                        that.$set(that.isCollection,i,that.questions[i].collections.filter(that.filterName)[0]?true:false);
                    }
                });
            }
        },
        filters:{
            filterDate:dateformat,
            filterHeader:filterHeader
        }
    }
    
</script>
<style lang="scss" src="../../assets/css/question.scss">

</style>

